<template>
  <div class="parentCommentWrap">
    <parent v-if="commentData.parent" :commentData="commentData.parent" />
    <el-row class="pcmt-info" justify="space-between" align="middle">
      <el-col :span="23">
        <span>{{ commentData.account.nickname }}</span>
        <span>{{ date }} </span>
      </el-col>
      <el-col :span="1">{{ commentData.level }}</el-col>
    </el-row>
    <el-row
      class="pcmt-content"
      @mouseenter.native="isShow = true"
      @mouseleave.native="isShow = false"
    >
      <el-row class="pcmt-message">
        <p>{{ commentData.content }}</p>
      </el-row>
      <el-row class="pcmt-pic" v-if="commentData.pics.length > 0">
        <img :src="$axios.defaults.baseURL + commentData.pics[0].url" alt="" />
      </el-row>
      <el-row class="pcmt-reply">
        <span @click="reply" v-if="isShow">回复</span>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "Parent",
  props: ["commentData"],
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    reply() {
      this.$store.commit("comment/changeId", {
        id: this.commentData.id,
        name: this.commentData.account.nickname,
      });
    },
  },
  computed: {
    date() {
      return moment(this.commentData.created_at).format("YYYY-MM-DD HH:mm");
    },
  },
};
</script>

<style lang="less" scoped>
.parentCommentWrap {
  padding: 5px;
  margin-left: 20px;
  margin-bottom: 8px;
  border: 1px solid #ddd;
  background-color: rgb(251, 244, 230);
  .pcmt-info {
    display: flex;
    font-size: 12px;
    color: #666;
    padding-left: 20px;
  }
  .pcmt-content {
    margin-left: 30px;
    .pcmt-message {
      padding-top: 10px;
    }
    .pcmt-pic {
      width: 80px;
      height: 80px;
      padding: 5px;
      margin-top: 10px;
      margin-right: 5px;
      border-radius: 6px;
      border: 1px dashed #ddd;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .pcmt-reply {
      text-align: right;
      font-size: 12px;
      line-height: 20px;
      height: 20px;
      color: #1e50a2;
      span {
        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
